<template>
	<view class="order">
		<u-empty v-if="OrderList.length == 0" mode="order" width="300rpx" height="300rpx" textSize="25rpx"
			icon="http://cdn.uviewui.com/uview/empty/order.png">
		</u-empty>
		<view class="order-one" v-for="(item,index) in OrderList" :key="index" @click="OrderClick(item)">
			<view class="order-img">
				<img :src="baseurl + item.goodsOut.imageList[0].url" alt="" srcset="">
			</view>
			<view class="order-other">
				<view class="other-title">
					{{item.goodsOut.title}}
				</view>
				<view class="other-money">
					￥{{item.goodsOut.money}}
				</view>
				<view class="other-yhq-title">
					{{item.goodsDetails?item.goodsDetails.title:"没有优惠券"}}
				</view>
				<view class="other-yhq-money">
					￥{{item.useMoney}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../static/http.js"
	export default {
		data() {
			return {
				OrderList: [],
				baseurl:http.BASE_URL
			}
		},
		onShow() {
			this.getUserOrder()
		},
		created() {
		},
		methods: {
			getUserOrder(){
				http.httpRequest("/order/getUserOrder","","GET").then(res=>{
					if(res.data.length>0){
						res.data.forEach(val=>{
							val.couponOut = JSON.parse(val.coupon)
							val.goodsOut = JSON.parse(val.goods)
							val.goodsDetails = val.couponOut.conDetails
						})
					}
					this.OrderList = res.data
				})
			},
			OrderClick(item){
				uni.navigateTo({
					url:"/pages/order/orderDetails?details="+ JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="less">
	.order {
		width: 100%;
		background-color: #f0f0f5;
		padding-bottom: 100rpx;
		height: 100%;
		.order-one{
			width: 100%;
			height: 250rpx;
			background-color: #fff ;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.order-img{
				width: 200rpx;
				height: 200rpx;
				margin-left: 10rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.order-other{
				width: calc(100% - 220rpx);
				height: 100%;
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				.other-title{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 35rpx;
					font-weight: 600;
				}
				.other-money{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 40rpx;
					color: #dd6161;
				}
				.other-yhq-title{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 25rpx;
				}
				.other-yhq-money{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 35rpx;
					color: #dd6161;
				}
			}
		}
	}
</style>
